<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="70%">
    <el-steps :space="200" :active="activeStatus" finish-status="success" :key="mykey">
      <el-step title="订单录入" :description="formatDate(formData.createTime)"/>
      <el-step title="客户确认" :description="formatDate(formData.customTime)"/>
      <el-step title="收货录入" :description="formatDate(formData.receiptTime)" v-if="formData.storage == 1"/>
      <el-step title="货物打包" :description="formatDate(formData.packTime)" v-if="formData.storage == 1"/>
      <el-step title="发货" :description="formatDate(formData.sendTime)" v-if="formData.storage == 1"/>
      <el-step title="上传报关资料" :description="formatDate(formData.customsTime)"/>
      <el-step title="航班到港" :description="formatDate(formData.arrivalTime)"/>
    </el-steps>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="订单详情" name="basic">
        <el-descriptions class="margin-top" title="" :column="3" :size="size" border>
        <el-descriptions-item label="订单编号">{{formData.orderId}}</el-descriptions-item>
        <el-descriptions-item label="客户手机">{{formData.phonenumber}}</el-descriptions-item>
        <el-descriptions-item label="进仓件数">{{formData.warehouseNumber}}</el-descriptions-item>
        <el-descriptions-item label="品名/型号" :span="3">{{formData.productNameMode}}</el-descriptions-item>
        <el-descriptions-item label="货物类型">{{getDictLabel(DICT_TYPE.GOODS_NATURE, formData.goodsNature)}}</el-descriptions-item>
        <el-descriptions-item v-if="formData.goodsNature == 1" label="需要特殊防护">{{getDictLabel(DICT_TYPE.BUS_TRUE_FALSE, formData.specialProtection)}}</el-descriptions-item>
        <el-descriptions-item v-if="formData.goodsNature == 1" label="自带危包">{{getDictLabel(DICT_TYPE.BUS_TRUE_FALSE, formData.comesDangerousBag)}}</el-descriptions-item>
        <el-descriptions-item label="主订单号">{{formData.mainOrderId}}</el-descriptions-item>
        <el-descriptions-item label="目的港">{{formData.unloadingPort}}</el-descriptions-item>
        <template v-if="formData.repulseStatus == 1">
          <el-descriptions-item  label="打回时间">{{formatDate(formData.repulseTime)}}</el-descriptions-item>
          <el-descriptions-item :span="3" label="打回原因">{{formData.remark}}</el-descriptions-item>
        </template>
    </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="收货录入" name="receipt" v-if="formData.status > 1 && formData.storage == 1 && receiptList.length > 0">
        <div style="color:#303133;font-size: 16px;font-weight: bold;padding:15px 0;">现场照片</div>
          <LocalImagesUplaod v-model="receiptList" :limit="20" :disabled="true" :drag="false"/>
        <div style="color:#303133;font-size: 16px;font-weight: bold;padding:15px 0;" v-if="receiptErrorList.length > 0">现场异常照片</div>
          <LocalImagesUplaod v-model="receiptErrorList" :limit="20" :disabled="true" v-if="receiptErrorList.length > 0"/>
        <div style="color:#303133;font-size: 16px;font-weight: bold;padding:15px 0;" v-if="ziliaoList.length > 0">其他资料</div>
          <LocalImagesUplaod v-model="ziliaoList" :limit="20" :disabled="true" v-if="ziliaoList.length > 0"/>
      </el-tab-pane>
      <el-tab-pane label="货物打包" name="pack" v-if="formData.status > 2 && formData.storage == 1 && packList.length > 0">
        <div style="color:#303133;font-size: 16px;font-weight: bold;padding:15px 0;">现场照片</div>
        <LocalImagesUplaod v-model="packList" :limit="packList.length" :disabled="true"/>
      </el-tab-pane>
      <el-tab-pane label="仓库发货" name="shipment" v-if="formData.status > 3 && shipmentList.length > 0">
        <div style="color:#303133;font-size: 16px;font-weight: bold;padding:15px 0;">现场照片</div>
        <LocalImagesUplaod v-model="shipmentList" :limit="20" :disabled="true"/>
        <div style="color:#303133;font-size: 16px;font-weight: bold;padding:15px 0;">称重条照片</div>
        <LocalImagesUplaod v-model="stripList" :limit="20" :disabled="true"/>
      </el-tab-pane>
      <el-tab-pane label="报关信息" name="customs" v-if="formData.status > 4 && customsList.length > 0">
        <div style="color:#303133;font-size: 16px;font-weight: bold;padding:15px 0;">报关资料</div>
        <LocalImagesUplaod v-model="customsList" :limit="20" :disabled="true"/>
        <div style="color:#303133;font-size: 16px;font-weight: bold;padding:15px 0;">其他资料</div>
        <LocalImagesUplaod v-model="othersList" :limit="20" :disabled="true"/>
      </el-tab-pane>
      <el-tab-pane label="航班到港" name="arrival" v-if="formData.status == 7">
        <el-input v-model="formData.reminder" style="width: 100%" :rows="6" type="textarea" placeholder="确认货物到港，告知用户到港情况，以及相关的提货信息"/>
      </el-tab-pane>

      
    </el-tabs>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, getStrDictOptions, DICT_TYPE, getDictLabel } from '@/utils/dict'
import { CargoInfoApi, CargoInfoVO } from '@/api/business/cargoinfo'
import type { ComponentSize } from 'element-plus'
import { formatDate } from '@/utils/formatTime'

/** 货物资料 表单 */
defineOptions({ name: 'ShippedBackForm' })

const size = ref<ComponentSize>('default')

const activeName = ref("basic");
const remark = ref()
const activeStatus = ref(0);

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const packList = ref([]);

const receiptList = ref([]);
const ziliaoList = ref([])
const receiptErrorList = ref([])

const shipmentList = ref([]);
const stripList = ref([])

const customsList = ref([]);
const othersList = ref([])

const mykey = ref(0)

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  orderId: '',
  warehouseNumber: undefined,
  productNameMode: undefined,
  goodsNature: '0',
  specialProtection: 0,
  comesDangerousBag: 0,
  mainOrderId: '',
  unloadingPort: '',
  phonenumber:'',
  status:0,
  storage:0
})

/** 打开弹窗 */
const open = async (id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = '订单信息'
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await CargoInfoApi.getCargoInfo(id)
      let status = formData.value.status;
      activeStatus.value = status;
      
      if(formData.value.storage == 0 && status > 1){
        activeStatus.value = status - 3;
      }
      let fileData = await CargoInfoApi.getCargoFiles(id);
      packList.value = fileData.packList;
      receiptList.value = fileData.receiptList;
      ziliaoList.value = fileData.receiptOthersList;
      receiptErrorList.value = fileData.receiptErrorList;
      shipmentList.value = fileData.outboundList;
      stripList.value = fileData.stripList;
      customsList.value = fileData.customsList;
      othersList.value = fileData.othersList;

      mykey.value = mykey.value + 1;
      activeName.value = 'basic';
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

</script>

<style lang="scss" scoped>
.upload {
:deep(.el-upload--picture-card){
    --el-upload-picture-card-size: 0px !important;
}
}
</style>
